<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"  onmouseover="yc1()" onmouseout="yc2()">
        <div class="box1">啊实打实大苏打大飒飒大苏打</div>
    </div>
</body>
</html>
<style >
    .box{
        height: 300px;
        width: 300px;
        background: #000;
        box-sizing: border-box;
        padding: 30px;
    }
    .box1{
        color:#fff ;
        
    }
</style>
<script>
    var box =document.querySelector('.box')
    var box1 =document.querySelector('.box1')
    
    function yc1 (){
        console.log(1);
      box.style.background='red'
      box1.style.background='#fff'
      box1.style.color='red'
    }
    function yc2 (){
        console.log(2);
      box.style.background='#000'
      box1.style.background='#000'
      box1.style.color='#fff'
    }
</script>